<template>
  <div class="recent-chat-list">
    <div class="middle-header">
      <q-input
        :model-value="searchQuery"
        @update:model-value="$emit('update:searchQuery', $event)"
        placeholder="搜索"
        outlined
        dense
        class="search-input"
        autocomplete="off"
      >
        <template v-slot:prepend>
          <q-icon name="search" />
        </template>
      </q-input>
      <q-btn
        flat
        round
        dense
        icon="add"
        @click="$emit('create-group')"
        class="add-btn"
      >
        <q-tooltip>发起群聊</q-tooltip>
      </q-btn>
    </div>
    <div class="middle-content">
      <div
        v-for="user in filteredContent"
        :key="user.id"
        class="user-item"
        :class="{ active: isActive(user) }"
        @click="handleSelect(user)"
        @contextmenu.prevent="handleContextMenu($event, user)"
      >
        <q-avatar 
          class="user-avatar" 
          size="48px" 
          :class="{ 'group-avatar': isGroup(user) }"
          :style="getAvatarStyle(user.id)"
        >
          {{ user.name?.[0] || 'U' }}
        </q-avatar>
        <div class="user-info">
          <div class="user-header">
            <div class="user-name-wrapper">
              <span class="user-name">
                <template v-if="isGroup(user)">
                  {{ user.name }}
                </template>
                <template v-else>
                  {{ user.name }}
                </template>
              </span>
              <q-icon v-if="isGroup(user)" name="people" size="14px" class="group-icon" />
            </div>
            <span class="user-time">{{ getLastMessageTime(user.id, user.chat_type) }}</span>
          </div>
          <div class="user-preview">
            <span>{{ getLastMessagePreview(user.id, user.chat_type) }}</span>
          </div>
        </div>
        <div class="action-buttons">
        <!-- 未读消息角标 -->
        <q-badge
          v-if="getUnreadCount(user) > 0"
          :label="getUnreadCount(user) > 99 ? '99+' : String(getUnreadCount(user))"
          color="red"
          class="unread-badge"
          rounded
        />
        <!-- 红点：表示有新消息但无法准确计算未读数量（通常是因为 read_sequence 为 0 或消息未加载） -->
        <div
          v-else-if="hasNewMessages(user) && getUnreadCount(user) === 0"
          class="unread-dot"
          :title="'有新消息'"
        />
          <!-- 三个横点按钮（好友和群组都显示） -->
          <q-btn
            flat
            round
            dense
            icon="more_horiz"
            size="sm"
            class="menu-btn"
            @click.stop="$emit('show-details', user)"
          >
            <q-tooltip>{{ isGroup(user) ? '群组详情' : '好友详情' }}</q-tooltip>
          </q-btn>
        </div>
      </div>
      <div v-if="filteredContent.length === 0" class="empty-state">
        <q-icon name="inbox" size="48px" color="grey-5" />
        <div class="empty-text">暂无聊天记录</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRecentChatList } from './RecentChatList'
import { getAvatarStyle } from '@/utils/avatar'
import GroupAvatar from './GroupAvatar.vue'

const props = defineProps<{
  searchQuery: string
  filteredContent: Array<{ id: string; name: string; chat_id?: string; chat_type?: number; member_count?: number; sequence?: number; read_sequence?: number }>
  currentTargetId: string | null
  getLastMessageTime: (id: string, chatType?: number) => string
  getLastMessagePreview: (id: string, chatType?: number) => string
}>()

const emit = defineEmits<{
  'update:searchQuery': [value: string]
  'select-user': [userId: string]
  'select-group': [groupId: string, groupName?: string]
  'delete-chat': [chatId: string, userId: string]
  'view-group-members': [groupId: string]
  'add-friend-from-group': [groupId: string]
  'show-details': [user: { id: string; name: string; chat_id?: string; chat_type?: number; member_count?: number }]
  'create-group': []
}>()

// 使用业务逻辑
const {
  isGroup,
  getUnreadCount,
  hasNewMessages,
  handleSelect,
  handleContextMenu,
  isActive,
} = useRecentChatList(props, emit)
</script>

<style lang="sass" scoped>
.recent-chat-list
  width: 100%
  height: 100%
  display: flex
  flex-direction: column
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale

.middle-header
  padding: 0 16px 12px 16px
  border-bottom: 1px solid #E5E5E5
  display: flex
  align-items: center
  gap: 12px
  background: transparent
  flex-shrink: 0

  .search-input
    flex: 1
    margin-top: 8px
    
    :deep(.q-field__control)
      border-radius: 8px
      border: 1px solid rgba(0, 0, 0, 0.08)
      background: #F5F5F5
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1)
      color: #191919
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04)
      
    :deep(.q-field--focused .q-field__control)
      border-color: rgba(7, 193, 96, 0.3)
      background: #FFFFFF
      box-shadow: 0 2px 8px rgba(7, 193, 96, 0.12), 0 0 0 3px rgba(7, 193, 96, 0.08)
    
    :deep(.q-field__native)
      color: #191919
      font-weight: 400
      
    :deep(.q-icon)
      color: #8E8E93
      transition: color 0.2s ease
      
    :deep(.q-field--focused .q-icon)
      color: #07C160

  .add-btn
    margin-top: 8px
    color: #666666
    flex-shrink: 0
    
    &:hover
      background: #F0F0F0
      color: #191919

.middle-content
  flex: 1
  overflow-y: auto
  overflow-x: hidden
  padding: 0
  background: transparent
  min-height: 0

.user-item
  display: flex
  align-items: center
  padding: 12px 16px
  cursor: pointer
  transition: all 0.2s ease
  border-bottom: 1px solid rgba(0, 0, 0, 0.08)
  position: relative
  flex-shrink: 0
  background: #FFFFFF

  &:hover
    background: #F5F5F5
    
  &.active
    background: #E5E5E5
    
.delete-btn,
.menu-btn
  opacity: 0

  &.active
    background: #E5E5E5

.action-buttons
  position: absolute
  right: 12px
  top: 70%
  transform: translateY(-50%)
  display: flex
  align-items: center
  gap: 4px

.unread-badge
  font-size: 11px
  font-weight: 600
  min-width: 18px
  height: 18px
  padding: 0 5px
  border-radius: 9px
  display: flex
  align-items: center
  justify-content: center
  background: linear-gradient(135deg, #FF3B30 0%, #FF2D55 100%)
  margin-right: 4px
  color: white
  box-shadow: 0 2px 6px rgba(255, 59, 48, 0.4), 0 1px 2px rgba(0, 0, 0, 0.1)
  animation: badgePulse 2s ease-in-out infinite

.unread-dot
  width: 10px
  height: 10px
  border-radius: 50%
  background: linear-gradient(135deg, #FF3B30 0%, #FF2D55 100%)
  margin-right: 4px
  box-shadow: 0 2px 8px rgba(255, 59, 48, 0.5), 0 0 0 3px rgba(255, 59, 48, 0.15)
  animation: dotPulse 2s ease-in-out infinite
  position: relative

.unread-dot::before
  content: ''
  position: absolute
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)
  width: 100%
  height: 100%
  border-radius: 50%
  background: rgba(255, 59, 48, 0.3)
  animation: dotRipple 2s ease-out infinite

@keyframes badgePulse
  0%, 100%
    transform: scale(1)
    box-shadow: 0 2px 6px rgba(255, 59, 48, 0.4), 0 1px 2px rgba(0, 0, 0, 0.1)
  50%
    transform: scale(1.05)
    box-shadow: 0 3px 8px rgba(255, 59, 48, 0.5), 0 2px 4px rgba(0, 0, 0, 0.15)

@keyframes dotPulse
  0%, 100%
    transform: scale(1)
    box-shadow: 0 2px 8px rgba(255, 59, 48, 0.5), 0 0 0 3px rgba(255, 59, 48, 0.15)
  50%
    transform: scale(1.1)
    box-shadow: 0 3px 12px rgba(255, 59, 48, 0.6), 0 0 0 4px rgba(255, 59, 48, 0.2)

@keyframes dotRipple
  0%
    transform: translate(-50%, -50%) scale(1)
    opacity: 0.8
  100%
    transform: translate(-50%, -50%) scale(2)
    opacity: 0

.delete-btn,
.menu-btn
  opacity: 0
  transition: opacity 0.2s ease
  color: #8E8E93
  
  &:hover
    background: rgba(0, 0, 0, 0.05)
    opacity: 1

.delete-btn
  color: #FF3B30
  
  &:hover
    background: rgba(255, 59, 48, 0.1)
    opacity: 1

.group-menu
  border-radius: 12px
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08)
  overflow: hidden
  border: 1px solid rgba(0, 0, 0, 0.06)
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif

.menu-list
  padding: 6px 0
  background: #FFFFFF
  min-width: 160px

.menu-item
  padding: 10px 16px
  min-height: 44px
  transition: background-color 0.15s ease
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif

  &:hover
    background-color: rgba(0, 0, 0, 0.04)

  .q-item__section--avatar
    padding-right: 12px
    opacity: 0.7

  &:hover .q-item__section--avatar
    opacity: 1

.menu-item-label
  font-size: 14px
  font-weight: 500
  letter-spacing: 0.15px
  line-height: 1.5
  color: #1f2937
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale

.menu-item-danger .menu-item-label
  color: #ef4444

.menu-separator
  margin: 6px 0
  background-color: rgba(0, 0, 0, 0.08)

.user-avatar
  margin-right: 12px
  flex-shrink: 0
  color: white
  font-weight: 500
  font-size: 18px
  letter-spacing: 0
  border: 1px solid #E5E5E5
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale

.group-avatar
  color: white
  font-weight: 500
  border: 1px solid #E5E5E5

.user-info
  flex: 1
  min-width: 0
  overflow: hidden

.user-header
  display: flex
  justify-content: space-between
  align-items: center
  margin-bottom: 4px

.user-name-wrapper
  display: flex
  align-items: center
  gap: 6px
  flex: 1
  min-width: 0
  overflow: hidden

.user-name
  font-size: 15px
  font-weight: 500
  letter-spacing: -0.01em
  color: #1a1a1a
  line-height: 1.4
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap
  flex: 1
  min-width: 0
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale

.group-icon
  color: #07C160
  flex-shrink: 0
  opacity: 0.9
  margin-left: 6px

.user-time
  font-size: 12px
  font-weight: 400
  letter-spacing: 0.02em
  color: #718096
  white-space: nowrap
  margin-left: 8px
  flex-shrink: 0
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale

.user-preview
  font-size: 13px
  font-weight: 400
  letter-spacing: 0.01em
  color: #718096
  line-height: 1.5
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  line-height: 1.4
  display: flex
  align-items: center
  gap: 8px
  
  .member-count
    color: #666666
    font-size: 12px

.empty-state
  padding: 60px 20px
  text-align: center
  color: #666666

  .empty-text
    margin-top: 16px
    font-size: 14px
    color: #666666

.middle-content
  &::-webkit-scrollbar
    width: 4px
    height: 4px

  &::-webkit-scrollbar-track
    background: transparent
    border-radius: 2px

  &::-webkit-scrollbar-thumb
    background: transparent
    border-radius: 2px
    transition: background 0.3s ease

  &:hover::-webkit-scrollbar-thumb
    background: rgba(255, 255, 255, 0.15)

  &::-webkit-scrollbar-thumb:hover
    background: rgba(255, 255, 255, 0.25)
</style>

